<template>
	<view class="loadingPages">
		<image class="loadingPagesImg" :style="{marginTop: `${myMarginTop}%`}" :src="myImg"></image>
		<p v-if="isP" class="empty">暂无{{text}}～</p>
		<p v-else class="empty">即将上线 敬请期待</p>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loadingIndex:-1
			}
		},
		props: {
			// 0未通过，1正在加载，2通过
			isLoading:{
				type: Number,
				default: 0
			},
			isP:{
				type: Boolean,
				default: true
			},
			text:{
				type: String,
				default: '情报'
			},
			myMarginTop:{
				type: Number,
				default: 50
			},
			myImg:{
				type: String,
				default: '/static/img/kongIcon.png'
			},
		},
		watch:{
			isLoading(newVal,oldVal){
				if(newVal){
					let myTime = null;
					myTime = setInterval(()=>{
						this.loadingIndex++;
						if(this.loadingIndex==3){
							clearInterval(myTime);
							this.$emit('updataIsLoading',2)
						}
					},800)
				}
			}
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
		},
		methods: {

	
		}
	}
</script>

<style lang="scss" scoped>
	.loadingPages{
		width: 100%;
		    height: 100%;
		    position: relative;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    background: transparent;
			.empty{
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				text-align: center;
				    margin-top: 24rpx;
				    color: #b9b1b1;
			}
			
		.loadingPagesImg{
			width: 320rpx;
			height: 320rpx;
			    margin-top: 50%;
		}
		.loadingPagesBody{
			margin-top: 62rpx;
			p{
				text-align: center;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 550;
				line-height: 40rpx;
				color: #ddd;;
				margin-top: 16rpx;
				opacity: 0;
				transition: all .5s;
			}
			.blocks{
				opacity: 1;
			}
			.act{
				color: #001951;
				
			}
		}
		.loadingPagesEnds{
			width: 100%;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #272727;
			position: absolute;
			bottom: 60rpx;
			text-align: center;
			
		}
	}
</style>